/*4.4 幻灯片
	Name:			module_slider
	Sample:
<div id="slider-1">
  <div class="slider">
    <div class="bd">
      <ul>
        <li><a href="http://www.h-ui.net/" target="_blank"><img src="temp/banner1.jpg" ></a></li>
        <li><a href="http://www.h-ui.net/zhaishang.shtml" target="_blank"><img src="temp/banner2.jpg" ></a></li>
        <li><a href="http://h-ui.net/H-ui.admin.shtml" target="_blank"><img src="temp/banner4.jpg" ></a></li>
      </ul>
    </div>
    <ol class="hd cl dots">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  </div>
</div>
	<script type="text/javascript" src="lib/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
	<script type="text/javascript">
	$(function() {
		jQuery("#slider-1 .slider").slide({mainCell:".bd ul",titCell:".hd li",trigger:"click",effect:"leftLoop",autoPlay:true,delayTime:700,interTime:3000,pnLoop:false,titOnClassName:"active"});
	});
	</script>
	Explain: 默认dots为圆点，在slider后面追加numSlider样式就变成带数字的方框，boxSlider为不带数字长方条
*/
/*请给每个幻灯片套个div并设置id，通过id重置这个地方的宽度，达到自定义效果*/
.slider {
    position: relative;
    text-align: center;
    margin: 0 auto;
    z-index: 1;
    .bd,
    .bd li,
    .bd img {
        width: 100%;
        height: 100%
    }
    .bd {
        z-index: 2;
        overflow: hidden;
        li {
            float: left;
            width: 100%;
            overflow: hidden;
            background-position: center;
            background-repeat: no-repeat;
            a {
                display: block;
                width: 100%;
                height: 100%;
            }
            img {
                display: block;
            }
        }
    }
    .hd {
        position: absolute;
        z-index: 3;
        left: 0;
        right: 0;
        bottom: 10px;
        padding: 0 10px;
        text-align: center;
        li {
            display: inline-block;
            text-align: center;
            margin-right: 10px;
            cursor: pointer;
            background-color: #C2C2C2;
            &.active {
                background-color: #222
            }
        }
    }
}

/*圆点*/
.dots li {
    width: 10px;
    height: 10px;
    font-size: 0px;
    line-height: 0px;
    border-radius: 50%
}


/*数字*/

.numbox li {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 13px;
    font-family: Arial;
    font-weight: bold;
    text-indent: inherit;
    &.active {
        color: #fff
    }
}
/*长方条*/
.rectangle li {
    width: 40px;
    height: 10px;
    font-size: 0px;
    line-height: 0px
}

.slider-arrow {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    z-index: 3;
    opacity: 0.7;
    filter: alpha(opacity=70);
    &:hover {
        opacity: 1;
        filter: alpha(opacity=100)
    }
    &.prev {
        left: 0;
    }
    &.next {
        right: 0
    }
}